<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-05 14:39:46
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-09 09:30:00
 * @Description: 
-->
<template>
  <a-layout-sider collapsible breakpoint="xl">
    <div class="logo" />
    <a-menu
      :default-open-keys="[routerKeyKind]"
      :default-selected-keys="[routerKey]"
      :style="{ width: '100%' }"
      @menu-item-click="onClickMenuItem"
    >
      <router-link to="/">
        <a-menu-item key="0">
          <IconHome></IconHome>
          欢迎使用
        </a-menu-item>
      </router-link>
      <!-- 底层原理 -->
      <a-sub-menu key="1">
        <template #title> <IconCalendar></IconCalendar> 底层原理 </template>
        <a-sub-menu key="1_1">
          <template #title>Observe Data</template>
          <router-link to="/vue2-principle">
            <a-menu-item key="1_1_1">Vue 2</a-menu-item>
          </router-link>
          <router-link to="/vue3-principle">
            <a-menu-item key="1_1_2">Vue 3</a-menu-item>
          </router-link>
        </a-sub-menu>
        <router-link to="/virtual_dom">
          <a-menu-item key="1_2">虚拟DOM</a-menu-item>
        </router-link>
      </a-sub-menu>

      <!-- Vue 练习 -->
      <a-sub-menu key="3">
        <template #title> <IconCalendar></IconCalendar> Vue 练习 </template>
        <router-link to="/exercises/data-transfer">
          <a-menu-item key="3_1">1.数据穿梭框</a-menu-item>
        </router-link>
        <router-link to="/exercises/props-test">
          <a-menu-item key="3_2">2.组件消息传递</a-menu-item>
        </router-link>
        <router-link to="/exercises/star-slider">
          <a-menu-item key="3_3">3.Star Slider</a-menu-item>
        </router-link>
        <router-link to="/exercises/upload-avatar">
          <a-menu-item key="3_4">4.上传头像</a-menu-item>
        </router-link>
      </a-sub-menu>

      <!-- wang-editor -->
      <router-link to="/wang-editor">
        <a-menu-item key="2">
          <IconHome></IconHome>
          wangEditor
        </a-menu-item>
      </router-link>
    </a-menu>
    <!-- trigger -->
    <template #trigger="{ collapsed }">
      <IconCaretRight v-if="collapsed"></IconCaretRight>
      <IconCaretLeft v-else></IconCaretLeft>
    </template>
  </a-layout-sider>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const routerKey = ref(router.currentRoute.value.meta.key);
const routerKeyArr = routerKey.value.split("_");
const routerKeyKind = ref(routerKeyArr[0]);
</script>

<style lang="less" scoped>
:deep(.arco-layout-sider) {
  width: 300px;
}
</style>
